import { Box, Button, Flex, FormControl, FormHelperText, FormLabel,   Input, InputGroup, InputLeftAddon, InputRightAddon, Radio, RadioGroup, Select, Stack, Switch,  } from "@chakra-ui/react"
import { FaCheck, FaLock, FaUserAlt } from 'react-icons/fa'


export default function Sigup() {
    return (<Box>
        <Stack spacing="2">
            <FormControl>
                <InputGroup>
                    <InputLeftAddon><FaUserAlt /></InputLeftAddon>
                    <Input placeholder="请输入用户名" />
                </InputGroup>
                <FormHelperText>用户名是必填项</FormHelperText>
            </FormControl>
            <InputGroup>
                <InputLeftAddon><FaLock /></InputLeftAddon>
                <Input placeholder="请输入密码" type="password" />
                <InputRightAddon><FaCheck /></InputRightAddon>
            </InputGroup>
            <RadioGroup defaultValue="1">
                <Stack direction="row" spacing="2">
                    <Radio value="1">男</Radio>
                    <Radio value="2">女</Radio>
                </Stack>
            </RadioGroup>
            <Select placeholder="请选择学科">
                <option>前端</option>
                <option>后端</option>
            </Select>
            <Flex >
                <Switch id="form-agree" mr="3" />
                <FormLabel htmlFor="form-agree">是否同意协议</FormLabel>
            </Flex>
            <Button w="100%" colorScheme="green">注册</Button>

        </Stack>
    </Box>)
}
/**
 * 表单
 * - 基本：输入框，下拉框，。。。
 * - size， 间距；圆角，阴影；颜色
 * - 
 */